<script setup lang="ts">
import {
  getCurrentInstance,
  onBeforeMount,
  onMounted,
  reactive,
  ref,
} from 'vue'
import CommonBaseInfoTable from '@/views/project-update/month-report/common-base-info-table.vue'
import { getProjectInventoryDetail } from '@/api/project-update/project-inventory'
import { Message } from 'element-ui'
import { getAreaStorageList } from '@/api/project-update/area-storage'

const vm = getCurrentInstance()

const props = defineProps({
  userLevel: Number,
  pkid: String,
  disabled: Boolean,
})

const form = reactive({})

const areaProjectOptions = ref([])

const getAreaProjectOptions = async () => {
  try {
    const res = await getAreaStorageList({ pageSize: 999 })
    if (res.success) {
      areaProjectOptions.value =
        res.data?.list?.map((item) => ({
          label: item.regionName,
          value: item.id,
        })) || []
    } else {
      Message.error(res.message)
    }
  } catch (error) {
    Message.error(error)
  }
}

const projectBasePart = ref([
  {
    label: '项目名称',
    key: 'peName',
    renderType: 'text',
    placeholder: '请输入',
  },
  {
    label: '所属片区项目',
    key: 'regionId',
    renderType: 'render',
  },
  {
    label: '开工时间',
    key: 'startTime',
    renderType: 'text',
  },
  {
    label: '完工时间',
    key: 'endTime',
    renderType: 'text',
  },
  {
    label: '项目周期',
    key: 'peCycle',
    renderType: 'text',
  },
])

const projectBasePart2 = ref([
  {
    label: '前期业主或实施主体企业',
    key: 'owner',
    renderType: 'render',
    contentClass: 'no-padding-content',
  },
  {
    label: '技术方案编制单位（策划实施单位）',
    key: 'planCompany',
    renderType: 'text',
    placeholder: '请输入',
  },
])

const projectBasePart3 = ref([
  {
    label: '项目实施单位',
    key: 'buildCompany',
    renderType: 'input',
    placeholder: '请输入',
    labelClass: 'text-red',
  },
  {
    label: '项目运营单位',
    key: 'operateCompany',
    renderType: 'input',
    placeholder: '请输入',
    labelClass: 'text-red',
  },
])

const projectBasePart4 = ref([
  {
    label: '项目更新指标',
    key: 'targetIndex',
    renderType: 'render',
    contentClass: 'no-padding-content project-update-index',
  },
  {
    label: '资金来源',
    key: 'fundingSource',
    renderType: 'render',
    contentClass: 'no-padding-content',
  },
])

const ownerTableProps = ref([
  {
    label: '单位名称',
    key: 'companyName',
    renderType: 'text',
    placeholder: '请输入',
  },
  {
    label: '单位介绍',
    key: 'companyIntroduce',
    renderType: 'text',
    placeholder: '请输入',
  },
])

const targetIndexTableProps = ref([
  {
    label: '①现状总建筑面积（m²）',
    key: 'beforeTotalArea',
    renderType: 'text',
    placeholder: '请输入',
    disabled: true,
  },
  {
    label: '②拟保留和改造建筑面积（m²）',
    key: 'beforeReformArea',
    renderType: 'text',
    placeholder: '请输入',
    calc: true,
  },
  {
    label: '③拟拆除建筑面积（m²）',
    key: 'beforeDismantleArea',
    renderType: 'text',
    placeholder: '请输入',
    calc: true,
  },
  {
    label: '④更新后总建筑面积（m²）',
    key: 'afterTotalArea',
    renderType: 'text',
    placeholder: '请输入',
    disabled: true,
  },
  {
    label: '⑤拟保留和改造建筑面积（m²）',
    key: 'afterReformArea',
    renderType: 'text',
    placeholder: '请输入',
    calc: true,
  },
  {
    label: '⑥改造中增加建筑面积（m²）',
    key: 'afterDismantle',
    renderType: 'text',
    placeholder: '请输入',
    calc: true,
  },
  {
    label: '⑦新增建筑面积（m²）',
    key: 'afterBuildingArea',
    renderType: 'text',
    placeholder: '请输入',
    calc: true,
  },
])

const fundingSourceTableProps = ref([
  {
    label: '本级政府预算（万元）',
    key: 'govBudget',
    renderType: 'text',
    placeholder: '请输入',
    calc: true,
  },
  {
    label: '上级财政补助（万元）',
    key: 'financeBudget',
    renderType: 'text',
    placeholder: '请输入',
    calc: true,
  },
  {
    label: '企业自筹（万元）',
    key: 'companyPrepare',
    renderType: 'text',
    placeholder: '请输入',
    calc: true,
  },
  {
    label: '银行贷款（万元）',
    key: 'bankLoans',
    renderType: 'text',
    placeholder: '请输入',
    calc: true,
  },
  {
    label: '其他金融投资（万元）',
    key: 'financeInvest',
    renderType: 'text',
    placeholder: '请输入',
    calc: true,
  },
  {
    label: '居民出资（万元）',
    key: 'jmcz',
    renderType: 'text',
    placeholder: '请输入',
    calc: true,
  },
  {
    label: '其他渠道（万元）',
    key: 'ohterChannels',
    renderType: 'text',
    placeholder: '请输入',
    calc: true,
  },
])

const formKeys = [
  'id',
  'regionId',
  'shgn1',
  'shgn2',
  'stgn1',
  'stgn2',
  'cygn1',
  'cygn2',
  'whgn1',
  'whgn2',
  'aqgn1',
  'aqgn2',
  'jtgn1',
  'jtgn2',
  'other2',
  'other3',
  'national',
  'province',
  'city',
  'district3',
  'historical',
  'traditional',
  'levelOne',
  'levelTwo',
  'levelThree',
  'famousTree',
  'position',
  'wgsPosition',
  'linePosition',
  'lineWgsPosition',
  'pointPosition',
  'pointWgsPosition',
]

onBeforeMount(() => {
  formKeys.forEach((key) => {
    vm?.proxy.$set(form, key, '')
  })
})

const getSubmitData = () => {
  return vm?.proxy.$refs.infoRef4?.getFilledFormData()
}

onMounted(async () => {
  getAreaProjectOptions()
  if (!props.pkid) return
  getProjectInventoryDetail(props.pkid).then((res) => {
    if (res.success) {
      const data = res.data
      formKeys.forEach((key) => {
        form[key] = data[key] ?? ''
      })
      for (let i = 1; i < 8; i++) {
        vm?.proxy.$refs[`infoRef${i}`]?.inputData(data)
      }
    } else {
      Message.error(res.message)
    }
  })
})

defineExpose({
  getSubmitData,
})
</script>

<template>
  <el-form class="detail-table" :disabled="disabled">
    <common-base-info-table
      ref="infoRef1"
      :base-info-table-props="projectBasePart"
      :border="true"
      :column="2"
      class="cell-num-2"
    >
      <template #regionId>
        {{
          areaProjectOptions.find((item) => item.value === form.regionId)
            ?.label || form.regionId
        }}
      </template>
    </common-base-info-table>
    <common-base-info-table
      ref="infoRef2"
      :base-info-table-props="projectBasePart2"
      :border="true"
      :column="1"
      class="cell-num-1"
    >
      <template #owner>
        <common-base-info-table
          ref="infoRef3"
          :column="1"
          :base-info-table-props="ownerTableProps"
          :border="true"
          class="cell-num-1-inner"
        />
      </template>
    </common-base-info-table>
    <common-base-info-table
      ref="infoRef4"
      :base-info-table-props="projectBasePart3"
      :border="true"
      :column="2"
      class="cell-num-2"
    >
    </common-base-info-table>
    <common-base-info-table
      ref="infoRef5"
      :base-info-table-props="projectBasePart4"
      :border="true"
      :column="1"
      class="cell-num-1-last"
    >
      <template #targetIndex>
        <div class="target-index-content">
          <div class="table-inline-item">
            <div class="table-property">现状建筑面积指标</div>
            <div class="table-property">更新后建筑面积指标</div>
          </div>
          <common-base-info-table
            ref="infoRef6"
            :column="7"
            :border="true"
            :base-info-table-props="targetIndexTableProps"
            :direction="'vertical'"
            class="cell-num-7"
          />
        </div>
      </template>
      <template #fundingSource>
        <common-base-info-table
          ref="infoRef7"
          :column="7"
          :border="true"
          :base-info-table-props="fundingSourceTableProps"
          :direction="'vertical'"
          class="cell-num-7"
        />
      </template>
    </common-base-info-table>
  </el-form>
</template>

<style scoped lang="scss">
.detail-table {
  width: 100%;

  $base-cell-width: calc(100% / 8);

  .name-inline {
    display: flex;
    align-items: center;

    .el-input {
      width: 220px;
      margin-right: 12px;
    }
  }

  .cell-num-1 {
    :deep(.el-descriptions-row) {
      .el-descriptions-item__label {
        width: $base-cell-width;
      }
    }
  }

  .cell-num-1-last {
    :deep(.el-descriptions-row) {
      .el-descriptions-item__label {
        width: $base-cell-width;
      }

      .el-descriptions-item__content {
        width: $base-cell-width * 7;
      }
    }
  }

  .cell-num-2 {
    :deep(.el-descriptions-row) {
      .el-descriptions-item__label {
        width: $base-cell-width;
      }

      .el-descriptions-item__content {
        width: $base-cell-width * 3;
      }
    }
  }

  .cell-num-3 {
    :deep(.el-descriptions-row) {
      .el-descriptions-item__label {
        width: $base-cell-width;
      }

      .el-descriptions-item__content {
        width: $base-cell-width;
      }

      .el-descriptions-item__content:nth-child(2) {
        width: $base-cell-width * 2;
      }
    }
  }

  :deep(.no-padding-content) {
    padding: 0 !important;
  }

  .target-index-content {
    width: 100%;
  }
  .cell-num-7 {
    :deep(.el-descriptions-row) {
      .el-descriptions-item__label {
        width: $base-cell-width;
      }

      .el-descriptions-item__content {
        width: $base-cell-width;
      }
    }
  }

  .cell-num-1-inner {
    :deep(.el-descriptions-row) {
      .el-descriptions-item__label {
        width: $base-cell-width * 1.15;
      }
    }
  }

  .cell-num-2-inner {
    :deep(.el-descriptions-row) {
      .el-descriptions-item__label {
        width: $base-cell-width * 1;
      }

      .el-descriptions-item__content {
        width: $base-cell-width * 2.5;
      }
    }
  }
  .table-inline-item {
    height: 46px;
    display: flex;
    align-items: center;

    div:first-child {
      border-right: 1px solid #ebeef5;
    }
  }

  .table-property {
    box-sizing: border-box;
    padding: 10px;
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .table-content-item {
    box-sizing: border-box;
    padding: 10px;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .project-vector-content {
    .table-inline-item:first-child {
      margin-left: 15px;
      border-bottom: 1px solid #ebeef5;
    }

    .table-inline-item:last-child {
      .el-button {
        height: 32px;
        display: flex;
        padding-top: 0;
        padding-bottom: 0;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
